import { defineComponent, ref, watch } from 'vue'
import { useFullscreen } from '@vueuse/core'
import { NModal } from 'naive-ui'
import messageBoxStyle from './styles/messageBox.module.scss'
import MacHeader from '@/components/codeBlock/MacHeader'
export default defineComponent({
  name: 'MessageBox',
  props: {
    width: {
      type: String,
      default: '420px'
    },
    modelValue: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    isDesc: {
      type: Boolean,
      default: false
    },
    isClose: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue', 'desc', 'full'],
  setup(props, { emit, slots }) {
    const modalRef = ref()
    const { isFullscreen, toggle } = useFullscreen(modalRef)
    watch(isFullscreen, () => {
      emit('full', isFullscreen.value)
    })
    const close = () => {
      emit('update:modelValue', false)
    }
    return () => (
      <>
        <NModal
          show={props.modelValue}
          mask-closable={false}
          onUpdateShow={close}
        >
          <div
            ref={modalRef}
            class={` ${messageBoxStyle.messageBox}`}
            style={{ width: props.width }}
          >
            {slots['header']?.() ||
              ((props.isClose || props.title) && (
                <MacHeader
                  title={props.title}
                  is-fullscreen={isFullscreen.value}
                  showDesc={props.isDesc}
                  onDesc={() => emit('desc')}
                  onToggle={toggle}
                  onClose={close}
                />
              ))}
            <div class={messageBoxStyle.messageBoxContent}>
              {slots['default']?.()}
            </div>
          </div>
        </NModal>
      </>
    )
  }
})
